<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <script type="text/javascript" language="javascript"  src="JQUERY/validate.js"></script>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/Site.css" />
	
	<!-- Script Starts -->	
	<link rel="stylesheet" type="text/css"  href="css/jquery.ui.all.css" />
	<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
	<script src="js/jquery-ui-1.8.11.custom.js"></script>
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.datepicker.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<!-- Script Ends -->	

</head>

<body background="Images/BlueBackground.jpeg">
    <div class="Container">
        <div class="header">
            <div class="title">
                <table class="HeaderTable">
                    <tr>
                        <td class="Logo"><h1>EFabe | Photography</h1>
                            </td>
                        <td class="Menubar">
                                <a href="HomePage.html" class="MenuDecoration">Home</a>&nbsp;&nbsp;  
                               <a href="Gallery\themes\classic\Gallery.html" class="MenuDecoration">Gallery</a>&nbsp;&nbsp; 
                            <a href="AboutUs.html" class="MenuDecoration">About Us</a>&nbsp;&nbsp;<a 
                                href="PhotoShootForm.html" class="MenuDecoration"> Setup Shoot</a>&nbsp;&nbsp; 
                            <a href="Contact.html" class="MenuDecoration">Contact Us</a>


                        </td>
                    </tr>
                </table>
            </div>
            
        </div>
        <div class="main">
            <div class ="LeftMain">
  <form name="contactfrm" id="contactfrm" action="contact.php" method="post">
  <table>
   <tr>
   <td>Name:</td>  
   <td><input type='text' id="name" name='name' /></td>
   </tr>
  <tr>
   <td>Address:</td>    
   <td><input type='text' name='address' id="address" /></td>
  </tr>
  <tr>
   <td>Email:</td> 
     <td><input type="text" name="email" id="email"></td>
   </tr>
  <tr>
   <td>Phone:</td>  
     <td><input type="text" name="phone"  id="phone"/></td>
   </tr>
  <tr> <td>Gender:</td>  
    <td><select name="gender" id="gender">
      <option value="Male" selected>Male</option>
      <option value="Female">Female</option>
    </select></td>
  </tr>
  <tr>
   <td>Photo Shoot Date:</td>  
     <td><input type="text" name="shootdate" id="shootdate"/></td>
   </tr>
</tr>
   <tr>
     <td><label for="textarea">Comments</label></td>
     <td><textarea name="comments" id="comments" cols="15" rows="2"></textarea></td>
   </tr>
   
   <tr>
   <td><input type="submit" value="Submit"></td>
   <td><input type="reset" value="Reset"></td>
  </tr>
</table>
</form>
            </div>
            <div class ="RightContainer">
                </div>
        </div>
        <div class ="footer">
            <table class="HeaderTable">
                <tr>
                    <td>
                        <h1 class="LFooter">EFabe Photography CopyRight 2013</h1></td>
                    <td>
                        <h1 class="RFooter">Social Media Instagram Twitter Facebook</h1></td>
                </tr>
            </table>
        </div>
    </div>
<script>
$(document).ready( function(){
		
        jQuery("#shootdate").datepicker({
            firstDay: 1 ,
            dateFormat: 'yy-mm-dd'
        });
		
		jQuery("#contactfrm").validate({
                rules: {
                        name : "required" ,
						address : "required" ,
						email: {
									required: true,
									 email: true
								},
                        phone :"required" ,
						shootdate: {
						required: true,
							date: true
							
						},
                        comments : "required" 
					},
                messages: {
					name : "Name was not entered" ,
					address : "Address was not entered" ,
					email: {
								required: "Email not entered",
								email: "Email not valid"
							},
					phone :"Phone number not entered" ,
						shootdate: {
							required: "Date is required",
							date: "Date format should be YYYY-mm-dd"
						},
                        comments : "Comments is required" 
                }
        });

		
}) ;
</script>  
</body>
</html>
